import { defineConfig } from "vite";

export default defineConfig({
  envPrefix: "MIKA",

  // 通过css属性来配置vite对于css的处理
  css: {
    // modules属性用于配置vite对于css的模块化方面的处理，这些配置最终会丢给postcss modules
    modules: {
      // 修改生成的配置对象的key的展示形式（驼峰还是中划线形式）
      // camelCase为驼峰、camelCaseOnly只为驼峰其他都被替换
      // dashes为中划线、dashesOnly为只能是中划线
      localsConvention: "camelCase",

      // 配置当前的模块化行为是模块化还是全局化，一般都是local，默认也是。很少很少会用到global
      scopeBehaviour: "local",

      // 自定义生成类名的规则，这个属性一般不会自己配置，规则可以参考一下百度
      //   generateScopedName: `[name]_[local]_[hash:5]`,
      //   generateScopedName: (name, filename, css) => {
      //     return `${name}_${Math.random().toString(36).substring(3, 8)}`;
      //   },

      // vite去生成hash会根据 你的类名+一些其他的字符串(文件名+它内部随机生成一个字符串)去进行生成，如果你想要生成hash更加的独特一点，你可以配置hashPrefix，你配置的，你配置的这个字符串会参与到最终hash的生成。一般项目中无需用到这个，因为基本不会有两个文件生成的hash一样的情况发生。
      // 要注意，你配置的这个字符串只是参与到最终hash的生成，并不是直接原封不动的加到最终生成的hash里
      hashPrefix: "mika",

      // 配置哪些文件不需要参与到css的模块化，这个也是很少用到
      globalModulePaths: ["./index.css"],
    },

    //
    preprocessorOptions: {
      less: {
        math: "always", //less里有一个特性就是可以进行数学计算，这里配置为always即可
        // less的第二个特点就是可以配置变量，这里的globalVars可以配置全局变量，这样就可以在每个less文件中去使用了
        globalVars: {
          screenWidth: "1920px",
          screenHeight: "1080px",
          defaultFontColor: "#bfbfbf",
          defaultBgColor: "#fff",
        },
      },
      sass: {},
    },

    // 开启css的sourcemap也就是文件索引，由于我们的css代码被打包后，打包好的css文件是没有换行和缩进的，如果代码有问题，我们便无法准确得到代码错误的位置。而sourcemap的作用正体现在这里。至于原理我们其实无需关心
    devSourcemap: true,
  },
});
